<template>
	<view class="container">
		<view class="polish-content">
			<!-- 左侧输入区 -->
			<view class="input-section">
				<text class="section-title">原始剧本</text>
				<textarea
					v-model="originalScript"
					class="script-input"
					placeholder="请在此输入您的剧本内容..."
					:maxlength="-1"
				></textarea>
			</view>
			
			<!-- 中间按钮区 -->
			<view class="action-section">
				<button class="polish-btn" @click="polishScript" :disabled="!originalScript || isPolishing">
					{{ isPolishing ? '润色中...' : '开始润色' }}
				</button>
			</view>
			
			<!-- 右侧结果区 -->
			<view class="result-section">
				<text class="section-title">润色结果</text>
				<scroll-view class="result-content" scroll-y>
					<text v-if="!polishedScript" class="placeholder-text">润色后的内容将在这里显示</text>
					<view v-else class="polished-text">
						<text>{{ polishedScript }}</text>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import { polishText } from '@/api/coze.js'

	export default {
		data() {
			return {
				originalScript: '',
				polishedScript: '',
				isPolishing: false
			}
		},
		methods: {
			async polishScript() {
				if (!this.originalScript) return
				
				this.isPolishing = true
				this.polishedScript = ''
				
				try {
					await polishText(this.originalScript, (result) => {
						this.polishedScript = result
					})
				} catch (error) {
					uni.showToast({
						title: '润色失败，请稍后重试',
						icon: 'none'
					})
				} finally {
					this.isPolishing = false
				}
			}
		}
	}
</script>

<style>
	.container {
		min-height: 100vh;
		position: relative;
		background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
	}
	
	.polish-content {
		display: flex;
		padding: 20rpx;
		height: 100vh;
		box-sizing: border-box;
	}
	
	.input-section,
	.result-section {
		width: calc(50% - 70rpx);
		background: rgba(255, 255, 255, 0.1);
		border-radius: 20rpx;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
	}
	
	.section-title {
		font-size: 32rpx;
		color: #ffffff;
		font-weight: bold;
		margin-bottom: 20rpx;
	}
	
	.script-input {
		flex: 1;
		background: rgba(0, 0, 0, 0.3);
		border-radius: 12rpx;
		padding: 20rpx;
		color: #ffffff;
		font-size: 28rpx;
		line-height: 1.6;
	}
	
	.action-section {
		width: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.polish-btn {
		width: 80rpx;
		height: 200rpx;
		background: linear-gradient(135deg, #6e45e2, #88d3ce);
		color: #ffffff;
		font-size: 28rpx;
		writing-mode: vertical-lr;
		text-orientation: upright;
		line-height: 80rpx;
		border-radius: 40rpx;
		padding: 0;
	}
	
	.polish-btn:active {
		transform: scale(0.98);
	}
	
	.polish-btn[disabled] {
		background: rgba(255, 255, 255, 0.3);
		color: rgba(255, 255, 255, 0.5);
	}
	
	.result-content {
		flex: 1;
		background: rgba(0, 0, 0, 0.3);
		border-radius: 12rpx;
		padding: 20rpx;
	}
	
	.placeholder-text {
		color: rgba(255, 255, 255, 0.3);
		font-size: 28rpx;
	}
	
	.polished-text {
		color: #ffffff;
		font-size: 28rpx;
		line-height: 1.6;
	}
	
	/* 适配H5端 */
	@media screen and (max-width: 768px) {
		.polish-content {
			flex-direction: column;
			padding: 20rpx;
		}
		
		.input-section,
		.result-section {
			height: calc(45vh - 80rpx);
		}
		
		.action-section {
			width: 100%;
			height: 120rpx;
			margin: 20rpx 0;
		}
		
		.polish-btn {
			width: 300rpx;
			height: 80rpx;
			writing-mode: horizontal-tb;
		}
	}
</style>